%h4
  = s_('Runners|Project runners')

.bs-callout.help-callout
  %p= s_('Runners|These runners are assigned to this project.')
  - if can?(current_user, :create_runner, @project)
    = render Pajamas::ButtonComponent.new(href: new_project_runner_path(@project), variant: :confirm) do
      = s_('Runners|New project runner')
    .gl-display-inline
      #js-project-runner-registration-dropdown{ data: { registration_token: @project.runners_token, project_id: @project.id } }
  - else
    = _('Please contact an admin to create runners.')
    = link_to _('Learn more.'), help_page_path('administration/settings/continuous_integration', anchor: 'restrict-runner-registration-by-all-users-in-an-instance'), target: '_blank', rel: 'noopener noreferrer'

%hr

- if @project_runners.any?
  %h4.underlined-title= s_('Runners|Assigned project runners')
  %ul.bordered-list{ data: { testid: 'assigned_project_runners' } }
    = render partial: 'projects/runners/runner', collection: @project_runners, as: :runner
  = paginate @project_runners, theme: "gitlab", param_name: "project_page", params: { expand_runners: true, anchor: 'js-runners-settings' }

- if @assignable_runners.any?
  %h4.underlined-title= _('Other available runners')
  %ul.bordered-list{ data: { testid: 'available_project_runners' } }
    = render partial: 'projects/runners/runner', collection: @assignable_runners, as: :runner
  = paginate @assignable_runners, theme: "gitlab", param_name: "specific_page", :params => { :anchor => 'js-runners-settings'}
